<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>战盟-梦想红人语音晚会</title>
</head>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="base.css" />

<body>
  <div class="container">
    <!-- 头部导航栏 -->
    <img class="DY_COMMON_TOPBAR" src="./PC端-切图/PC端-切图/导航.png" alt="">
    <!-- 主内容区域 -->
    <div class="main">
      <!-- 底层背景 -->
      <!-- <div class="s1">
        <img src="./PC端-切图/PC端-切图/背景/背景_02.png" alt="">
        <img src="./PC端-切图/PC端-切图/背景/背景_04.png" alt="">
        <img src="./PC端-切图/PC端-切图/背景/背景_05.png" alt="">
        <img src="./PC端-切图/PC端-切图/背景/背景_06.png" alt="">
        <img src="./PC端-切图/PC端-切图/背景/背景_07.png" alt="">
      </div> -->
      <div class="s1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <!-- 上层中间内容 -->
      <div class="s2">

        <!-- 视频转播区 -->
        <div class="rebroadcast">
          <!-- 视频转播区头部 -->
          <div class="rbcastTop">
            <div class="rbcastTopHead">
              <div class="lt head"></div>
              <div class="rt title">
                <p style="font-size: 24px;">华山论剑红人晚会</p>
                <p style="font-size: 18px;">转播已结束，欢迎下次收看</p>
              </div>
            </div>
            <div class="rbcastTopEnd">
              <span style="margin-right: 50px;">下载战盟领礼包</span>
              <span>分享</span>
            </div>
          </div>
          <!-- 视频转播区视频窗口和评论 -->
          <div class="rbcastMain">
            <div class="lt">
              <div class="video">视频</div>
              <div class="control">控制区域</div>
            </div>
            <div class="comment">
              评论
            </div>
          </div>
          <!-- 视频转播区底部 -->
          <div class="rbcastBottom">
            <div class="lt">
              <span>正在播出：</span>
              <span class="yellow">精彩视频</span>
            </div>
            <div style="margin-left:357px">
              <span>即将播出：</span>
              <span class="yellow">转播已结束</span>
            </div>
          </div>
        </div>
        <!-- 红人墙 -->
        <!-- 红人墙大标题 -->
        <div class="starWallTitle"></div>

        <!-- 红人墙star内容区域开始 -->
        <div class="starWallMain">
          <div style="margin-bottom: 94px;">
            <ul class="stars clearfix">
              <li>龙飞凤舞</li>
              <li>天外有天</li>
              <li>天妃#爱人</li>
              <li>一条小团团</li>
              <li>我叫李嘉琪</li>
            </ul>

            <div class="detail">
              <!-- 头像 | 简介 | 票数 -->
              <div class="starData">
                <div class="starPhoto lt">
                  <img src="./PC端-切图/PC端-切图/touxiang.png" alt="">
                </div>
                <div class="starIntroduction lt">
                  <h3>龙飞凤舞</h3>
                  <p class="starDetail">
                    Vsinger旗下的虚拟歌手乐正绫的声源，知名动漫歌手，声音甜美、辨识度高、高音透明感；满满的元气少女声线，为多部动画及游戏演唱主题曲，同时涉足cosplay及同人配音领域。</p>
                </div>
                <div class="voteBar lt">
                  <h4>当前票数：238713</h4>
                  <h6>剩余应缓票：<span class="yellow">7张</span>（已使用14张）</h6>
                  <div class="voteBarBtn"></div>
                </div>
              </div>
              <!-- 视频介绍 -->
              <div class="starWallVideo">
                <img src="./PC端-切图/PC端-切图/video.png" alt="">
                <div class="videoMask"></div>
              </div>
            </div>
          </div>
          <!-- 抽奖规则和抽奖转盘 -->
          <div class="lt">
            <div class="starWallRules">
              <ul>
                <li>
                  <img src="./PC端-切图/PC端-切图/标题标签.png" alt="">
                  <span>剩余应缓票：<span class="yellow">7张</span>（已使用14张）</span>
                </li>
                <li>
                  <span><img src="./PC端-切图/PC端-切图/标题标签.png" alt=""></span>
                  <span>活动规则：</span>
                  <p>1.活动时间为 2020年03月16日-22日<br>
                    2.活动期间完成任务获得应援票，每天登录活动页面和游戏都可
                    &nbsp;&nbsp;&nbsp;以获取应援票。<br>
                    3.每消耗5张应援票，可以获得一次抽奖机会。<br>
                    4.应援票和抽奖机会仅在活动期间有效，到期自动清零。</p>
                </li>
              </ul>
            </div>
            <div class="starWallLottery">
              <!-- 用绝对定位+伪元素做外面黑色小边框 -->
              <div class="marquee"></div>
              <div class="wheelBox">
                <!-- 静态状态下 -->
                <ul class="lottery">
                  <li><img src="./PC端-切图/PC端-切图/奖品01.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/奖品02.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/奖品03.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/奖品04.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/奖品05.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/奖品06.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/奖品07.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/奖品08.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/抽奖按钮.png" alt=""></li>
                </ul>
                <!-- 抽奖转盘转动状态下 -->
                <ul class="lotterying">
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品01.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品02.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品03.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品04.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品05.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品06.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品07.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/奖品08.png" alt=""></li>
                  <li><img src="./PC端-切图/PC端-切图/滚动状态/按钮.png" alt=""></li>
                </ul>
              </div>
            </div>
            <div class="starWallLotteryBottom">
              <span>中奖记录</span>
              <em>抽奖次数：0</em>
              <span>刷新</span>
            </div>
          </div>
          <!-- 抽奖途径表格和抽奖结果展示 -->
          <div class="rt">
            <div class="starWallTable">
              <table>
                <tr>
                  <th>抽奖途径</th>
                  <th>票数</th>
                  <th>达成情况</th>
                </tr>
                <tr>
                  <td>登录页面</td>
                  <td>1票/天</td>
                  <td>未完成</td>
                </tr>
                <tr>
                  <td>登录游戏<span class="yellow">（立即下载）</span></td>
                  <td>1票/天</td>
                  <td>未完成</td>
                </tr>
                <tr>
                  <td class="yellow">分享页面</td>
                  <td>2票</td>
                  <td>未完成</td>
                </tr>
                <tr>
                  <td>收听语音20分钟</td>
                  <td>4票</td>
                  <td style="opacity: 0.29;">已完成</td>
                </tr>
              </table>
            </div>
            <div class="starWallResult">
              <h5><img src="./pC端-切图/PC端-切图/标题标签.png" alt="">玩家抽奖获取情况</h5>
              <p>抽奖尚未开始，每天完成任务科累计抽奖次数，获得大奖的几率更高哦～</p>
              <div></div>
            </div>
          </div>
        </div>
        <!-- 红人墙star内容区域结束 -->

        <!-- 活动介绍大标题 -->
        <div class="activityTitle"></div>
        <!-- 活动介绍开始 -->
        <div class="activity">
          <img class="lt" src="./PC端-切图/PC端-切图/活动介绍配图.png" alt="">
          <div class="activityIntro rt">
            <h3>红人晚会</h3>
            <p>
              4名红人在华山论剑开放时分为4个阵营，进行线上PK赛，同时打造线上狂欢晚会，为阵营拉票，在开测当周华山论剑结束之际，游戏内匹配胜利一次加1分，失败不得分，最终积分最高的红人获胜。获胜的一方所有投票玩家将获得丰厚奖励，失败的一方也将获得其他奖励。
            </p>
            <div>了解更多</div>
          </div>
        </div>
        <!-- 活动介绍结束 -->

        <!-- 更多精彩大标题 -->
        <div class="moreTitle"></div>
        <!-- 更多精彩内容开始 -->
        <article class="more clearfix">
          <div class="left">
            <img src="./PC端-切图/PC端-切图/more02.png" alt="">
            <div class="morebg">
              <div style="text-align: center;">
                <h3>梦想同行者</h3>
                <h5>寻找梦想的痕迹</h5>
              </div>
            </div>
          </div>
          <div class="right">
            <img src="./PC端-切图/PC端-切图/more02.png" alt="">
            <div class="morebg">
              <div style="text-align: center;">
                <h3>梦想电台</h3>
                <h5>与你闯荡梦里江湖</h5>
              </div>
            </div>
          </div>
          <div class="center">
            <img src="./PC端-切图/PC端-切图/more03.png" alt="">
            <div class="morebg">
              <div style="text-align: center;">
                <h3>游戏攻略</h3>
                <h5>海量攻略一网打尽</h5>
              </div>
            </div>
          </div>
        </article>
        <!-- 更多精彩内容结束 -->
      </div>
    </div>


    <!-- 底部黑边 -->
    <div class="DY_COMMON_BUTTONBAR"></div>
  </div>


  <!-- 引入js文件 -->
  <script src="./index.js"></script>
</body>

</html>